<!DOCTYPE html>
<html>
<head>
    <title translatable="yes">System</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../base1/patternfly.css" rel="stylesheet">
    <link href="../shell/index.css" rel="stylesheet">
    <link href="system.css" rel="stylesheet">
    <script src="../base1/jquery.js"></script>
    <script src="../base1/cockpit.js"></script>
    <script src="../*/po.js"></script>
</head>
<body hidden>

    <script id="ssh-host-keys-tmpl" type="x-template/mustache">
        <div class="list-group dialog-list-ct">
            {{#keys}}
                <div class="list-group-item">
                    <p>{{ title }}</p>
                    {{#fps}}
                    <small>{{.}}</small>
                    {{/fps}}
                </div>
            {{/keys}}
            {{^keys}}
                <div class="list-group-item">
                    <p translatable="yes">No host keys found.</p>
                </div>
            {{/keys}}
        </div>
    </script>

    <script id="ntp-status-icon-tmpl" type="x-template/mustache">
      {{#Synched}}
      <span class="fa fa-lg fa-info-circle"></span>
      {{/Synched}}
      {{^Synched}}
      {{#Server}}
      <span class="spinner spinner-xs spinner-inline"></span>
      {{/Server}}
      {{^Server}}
      <span class="fa fa-lg fa-exclamation-circle fa-red"></span>
      {{/Server}}
      {{/Synched}}
    </script>

    <script id="ntp-status-tmpl" type="x-template/mustache">
      {{#Synched}}
      {{#Server}}
      <div translatable="yes">Synchronized with {{Server}}</div>
      {{/Server}}
      {{^Server}}
      <div translatable="yes">Synchronized</div>
      {{/Server}}
      {{/Synched}}
      {{^Synched}}
      {{#Server}}
      <div translatable="yes">Trying to synchronize with {{Server}}</div>
      {{/Server}}
      {{^Server}}
      <div translatable="yes">Not synchronized</div>
      {{#service}}
      <a data-goto-service="{{.}}" class="small-messages" translate>Log messages</a>
      {{/service}}
      {{/Server}}
      {{/Synched}}
      {{#SubStatus}}
      <div class="small-messages">{{SubStatus}}</div>
      {{/SubStatus}}
    </script>

    <div id="motd-box" class="container-fluid page-ct" hidden>
      <div class="alert alert-info">
        <button type="button" class="close" aria-hidden="true">
          <span class="pficon pficon-close"></span>
        </button>
        <span class="pficon pficon-info"></span>
        <pre id="motd"></pre>
      </div>
    </div>

    <div id="server" class="container-fluid page-ct">
        <div class="col-md-4 col-lg-3 info-table-ct-container">
            <table class="info-table-ct">
                <tr>
                    <td translatable="yes">Hardware</td>
                    <td id="system_information_hardware_text"></td>
                </tr>
                <tr id="system-info-asset-row">
                    <td translatable="yes">Asset Tag</td>
                    <td id="system_information_asset_tag_text"></td>
                </tr>
                <tr>
                    <td translatable="yes">Machine ID</td>
                    <td id="system_machine_id"></td>
                </tr>
                <tr id="system_information_os">
                    <td translatable="yes">Operating System</td>
                    <td id="system_information_os_text"></td>
                </tr>
                <tr id="system-ssh-keys">
                    <td translatable="yes">Secure Shell Keys</td>
                    <td><a id="system-ssh-keys-link" translatable="yes" data-toggle="modal"
                           data-target="#system_information_ssh_keys">Show fingerprints</a></td>
                </tr>
                <tr id="system-ostree-version" class="hidden">
                    <td translatable="yes">Version</td>
                    <td><a id="system-ostree-version-link"></a></td>
                </tr>
                <tr>
                    <td translatable="yes">Host Name</td>
                    <td><a class="hostname-privileged"
                            id="system_information_hostname_button"></a></td>
                </tr>
                <tr id="system-info-domain" hidden>
                    <td translatable="yes">Domain</td>
                    <td class="button-location">
                    </td>
                </tr>
                <tr>
                    <td translatable="yes">System Time</td>
                    <td><a class="systime-privileged"
                                id="system_information_systime_button"></a>
                      <a hidden id="system_information_systime_ntp_status"
                         tabindex="0" role="button" data-toggle="popover"
                         data-trigger="focus" data-placement="top"
                         data-html="true" data-content="">
                      </a>
                    </td>
                </tr>
                <tr>
                    <td translatable="yes">Power Options</td>
                    <td id="shutdown-group">
                        <div class="btn-group">
                            <button class="btn btn-default btn-danger" data-action="restart"
                                data-container="body" translatable="yes">Restart</button>
                            <button data-toggle="dropdown" class="btn btn-default dropdown-toggle">
                                <span class="caret"></span>
                            </button>
                            <ul role="menu" class="dropdown-menu">
                                <li class="presentation">
                                    <a role="menuitem" data-action="restart" translatable="yes">Restart</a>
                                </li>
                                <li class="presentation">
                                    <a role="menuitem" data-action="shutdown" translatable="yes">Shut Down</a>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tr>
                <tr id="system-info-performance" hidden>
                    <td translatable="yes">Performance Profile</td>
                    <td class="button-location">
                    </td>
                </tr>
                <tr id="server-pmlogger-onoff-row" hidden>
                    <td translatable="yes">Store Performance Data</td>
                    <td>
                        <div class="btn-group btn-onoff-ct" id="server-pmlogger-switch" data-toggle="buttons">
                            <label class="btn">
                                <input type="radio" name="pmlogger-switch" autocomplete="off">
                                <span translatable="yes">On</span>
                            </label>
                            <label class="btn active">
                                <input type="radio" name="pmlogger-switch" autocomplete="off" checked>
                                <span translatable="yes">Off</span>
                            </label>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div id="server-graph-columns" class="col-md-8 col-lg-9">
            <div id="server-graph-toolbar" class="zoom-controls standard-zoom-controls">
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        <span></span>
                        <div class="caret"></div>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation"><a role="menuitem" tabindex="-1"
                            data-action="goto-now" translate>Go to now</a></li>
                        <li role="presentation" class="divider"></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1"
                            data-range="300" translate>5 minutes</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1"
                            data-range="3600" translate>1 hour</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1"
                            data-range="21600" translate>6 hours</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1"
                            data-range="86400" translate>1 day</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1"
                            data-range="604800" translate>1 week</a></li>
                    </ul>
                </div>
                <button class="btn btn-default" data-action="zoom-out">
                    <span class="glyphicon glyphicon-zoom-out"></span>
                </button>
                <div class="btn-group">
                    <button class="btn btn-default fa fa-angle-left" data-action="scroll-left"></button>
                    <button class="btn btn-default fa fa-angle-right" data-action="scroll-right"></button>
                </div>
            </div>
            <div>
              <span class="plot-unit" id="server_cpu_unit">%</span><a id="link-cpu" translate>CPU</a>
            </div>
            <div id="server_cpu_graph" class="server-graph zoomable-plot"></div>
            <br/>
            <div>
              <span class="plot-unit" id="server_memory_unit"></span><a id="link-memory" translate>Memory</a>
            </div>
            <div id="server_memory_graph" class="server-graph zoomable-plot"></div>
            <br/>
            <div>
              <span class="plot-unit" id="server_disk_io_unit"></span><a id="link-disk" translate>Disk I/O</a>
            </div>
            <div id="server_disk_io_graph" class="server-graph zoomable-plot"></div>
            <br/>
            <div>
              <span class="plot-unit" id="server_network_traffic_unit"></span><a id="link-network" translate>Network Traffic</a>
            </div>
            <div id="server_network_traffic_graph" class="server-graph zoomable-plot"></div>
        </div>
    </div>

    <div id="cpu_status" hidden>
        <ul class="server-graph-legend">
            <li class="cpu-io-wait">
                <i class="fa fa-square"></i>
                <span translatable="yes">I/O Wait</span>
            </li>
            <li class="cpu-kernel">
                <i class="fa fa-square"></i>
                <span translatable="yes">Kernel</span>
            </li>
            <li class="cpu-user">
                <i class="fa fa-square"></i>
                <span translatable="yes">User</span>
            </li>
            <li class="cpu-nice">
                <i class="fa fa-square"></i>
                <span translatable="yes">Nice</span>
            </li>
        </ul>
        <div id="cpu_status_graph"></div>
    </div>

    <div id="memory_status" hidden>
        <ul class="server-graph-legend">
            <li class="memory-swap">
                <i class="fa fa-square"></i>
                <span translatable="yes">Swap Used</span>
            </li>
            <li class="memory-cached">
                <i class="fa fa-square"></i>
                <span translatable="yes">Cached</span>
            </li>
            <li class="memory-used">
                <i class="fa fa-square"></i>
                <span translatable="yes">Used</span>
            </li>
            <li class="memory-free">
                <i class="fa fa-square"></i>
                <span translatable="yes">Free</span>
            </li>
        </ul>
        <div id="memory_status_graph"></div>
    </div>

    <div class="modal" id="system_information_ssh_keys" tabindex="-1"
        role="dialog" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" translatable="yes">Machine SSH Key Fingerprints</h4>
                </div>
                <div class="modal-body">
                    <div class="spinner spinner-lg"></div>
                    <div class="alert alert-danger" hidden>
                      <span class="pficon pficon-error-circle-o"></span>
                      <strong></strong>
                    </div>
                    <div class="content" hidden></div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal" translate>Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="system_information_change_hostname" tabindex="-1"
        role="dialog" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" translate>Change Host Name</h4>
                </div>
                <div class="modal-body">
                    <table class="form-table-ct">
                        <tr>
                            <td>
                                <label class="control-label" for="sich-pretty-hostname"
                                    translatable="yes">Pretty Host Name</label>
                            </td>
                            <td>
                                <input id="sich-pretty-hostname" class="form-control">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label class="control-label" for="sich-hostname"
                                    translatable="yes">Real Host Name</label>
                            </td>
                            <td>
                                <div id=sich-hostname-error>
                                    <input id="sich-hostname" class="form-control">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <div class="has-error">
                                    <span id="sich-note-1" class="help-block"></span>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <div class="has-error">
                                    <span id="sich-note-2" class="help-block"></span>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal" translate>Cancel</button>
                    <button class="btn btn-primary" id="sich-apply-button" translate>Change</button>
                </div>
            </div>
        </div>
    </div>

    <script id="ntp-servers-tmpl" type="x-template/mustache">
      <div class="systime-inline">
        {{#NTPServers}}
        <form class="form-inline">
          <button data-action="add" data-index={{index}} class="btn btn-default fa fa-plus"></button>
          <button data-action="del" data-index={{index}} class="btn btn-default pficon-close"></button>
          <div class="form-group">
            <input type="text" class="form-control" value="{{Value}}" placeholder="{{Placeholder}}">
          </div>
        </form>
        {{/NTPServers}}
      </div>
    </script>

    <div class="modal" id="system_information_change_systime" tabindex="-1"
        role="dialog" data-backdrop="static">
        <div class="modal-dialog cockpit-modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" translate>Change System Time</h4>
                </div>
                <div class="modal-body">
                    <table class="form-table-ct">
                        <tr>
                            <td>
                                <label class="control-label" translatable="yes">Time Zone</label>
                            </td>
                            <td>
                                <select class="form-control" id="systime-timezones">
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td class="has-error">
                                <span id="systime-timezone-error" class="help-block" translatable="yes">Invalid time zone</span>
                            </td>
                        </tr>
                        <tr>
                            <td><label class="control-label" for="change_systime"
                                       translatable="yes">Set Time</label></td>
                            <td>
                                <div class="btn-group bootstrap-select dropdown form-control" id="change_systime">
                                    <button class="btn btn-default dropdown-toggle" type="button"
                                        data-toggle="dropdown">
                                        <span class="pull-left" translatable="yes">Manually</span>
                                        <div class="caret"></div>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li value="manual_time"><a translatable="yes">Manually</a></li>
                                        <li value="ntp_time"><a translatable="yes">Automatically using NTP</a></li>
                                        <li value="ntp_time_custom"><a translatable="yes">Automatically using specific NTP servers</a></li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <tr id="systime-manual-row">
                            <td></td>
                            <td>
                                <input type='text' class="form-control" id="systime-date-input"/>
                                <input type='text' class="form-control" id="systime-time-hours"/>
                                :
                                <input type='text' class="form-control" id="systime-time-minutes"/>
                            </td>
                        </tr>
                        <tr id="systime-manual-error-row">
                            <td>
                            </td>
                            <td class="has-error">
                                <span id="systime-parse-error" class="help-block"></span>
                            </td>
                        </tr>
                        <tr id="systime-ntp-servers-row">
                            <td></td>
                            <td id="systime-ntp-servers">
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal" translate>Cancel</button>
                    <button class="btn btn-primary" id="systime-apply-button" translate>Change</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="shutdown-dialog" tabindex="-1" role="dialog" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <textarea class="form-control">
                    </textarea>
                    <table>
                        <tr>
                            <td>
                                <label translatable="yes">Delay</label>
                            </td>
                            <td>
                                <div class="btn-group bootstrap-select dropdown form-control">
                                    <button class="btn btn-default dropdown-toggle" type="button"
                                        data-toggle="dropdown">
                                        <span class="pull-left" translatable="yes">1 Minute</span>
                                        <div class="caret"></div>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li value="1"><a translatable="yes">1 Minute</a></li>
                                        <li value="5"><a translatable="yes">5 Minutes</a></li>
                                        <li value="20"><a translatable="yes">20 Minutes</a></li>
                                        <li value="40"><a translatable="yes">40 Minutes</a></li>
                                        <li value="60"><a translatable="yes">60 Minutes</a></li>
                                        <li role="separator" class="divider"></li>
                                        <li value="0"><a translatable="yes">No Delay</a></li>
                                        <li value="x"><a translatable="yes">Specific Time</a></li>
                                    </ul>
                                </div>
                            </td>
                            <td>
                                <div>
                                    <input class="form-control shutdown-date" type="text">
                                    <input class="form-control shutdown-hours" type="text">
                                    :
                                    <input class="form-control shutdown-minutes" type="text">
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" translatable="yes" data-dismiss="modal">Cancel</button>
                    <button class="btn btn-danger"></button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="confirmation-dialog" tabindex="-1" role="dialog" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="confirmation-dialog-title"></h4>
                </div>
                <div class="modal-body" id="confirmation-dialog-body">
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" translatable="yes" id="confirmation-dialog-cancel">Cancel</button>
                    <button class="btn btn-danger" id="confirmation-dialog-confirm">
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="system.js"></script>
    <script src="../domain/domain.js"></script>
    <script src="../performance/performance.js"></script>
</body>
</html>
